<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('项目管理列表')"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>        .charts-container {
        display: flex;
        justify-content: space-between;
    }

    .chart-box {
        width: 48%; /* 两个图表各占48%，留出2%的间距 */
        height: 400px;
    }
    </style>
</head>
<body>
<div class="container-div">
    <div class="row">
        <!-- 图表容器 -->
        <div class="charts-container">
            <div class="chart-box" id="chart1"></div>
            <div class="chart-box" id="chart2"></div>
        </div>
        <div class="charts-container">
            <div class="chart-box" id="chart3"></div>
            <div class="chart-box" id="chart4"></div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    // var prefix = ctx + "system/managementsh";

    function initCharts() {
        // 使用假数据
        var fakeData = [
            {
                "projectName": "项目A",
                "status": "报告待审核",
                "expectedDuration": 30,
                "estimatedCost": 100000
            },
            {
                "projectName": "项目B",
                "status": "审核不通过",
                "expectedDuration": 45,
                "estimatedCost": 150000
            },
            {
                "projectName": "项目C",
                "status": "审核通过",
                "expectedDuration": 60,
                "estimatedCost": 200000
            },
            {
                "projectName": "项目D",
                "status": "已上传",
                "expectedDuration": 75,
                "estimatedCost": 250000
            }
        ];

        // 调用 renderCharts 函数
        renderCharts(fakeData);

        // // 获取数据
        // $.ajax({
        //     url: prefix + "/list",
        //     type: 'GET',
        //     success: function (data) {
        //         renderCharts(data);
        //     },
        //     error: function (jqXHR, textStatus, errorThrown) {
        //         console.error("请求失败: " + textStatus + ", " + errorThrown);
        //     }
        // });
    }

    function renderCharts(data) {
        // 渲染第一个图表（柱状图）
        var chart1 = echarts.init(document.getElementById('chart1'));
        var option1 = {
            title: {
                text: '项目状态分布'
            },
            tooltip: {},
            legend: {
                data: ['数量']
            },
            xAxis: {
                data: ["报告待审核", "审核不通过", "审核通过", "已上传"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [
                    data.filter(item => item.status === '报告待审核').length,
                    data.filter(item => item.status === '审核不通过').length,
                    data.filter(item => item.status === '审核通过').length,
                    data.filter(item => item.status === '已上传').length
                ]
            }]
        };
        chart1.setOption(option1);

        // 渲染第二个图表（折线图）
        var chart2 = echarts.init(document.getElementById('chart2'));
        var option2 = {
            title: {
                text: '项目预期工期分布'
            },
            tooltip: {},
            legend: {
                data: ['工期']
            },
            xAxis: {
                data: data.map(item => item.projectName)
            },
            yAxis: {},
            series: [{
                name: '工期',
                type: 'line', // 修改为折线图
                data: data.map(item => item.expectedDuration)
            }]
        };
        chart2.setOption(option2);

        // 渲染第三个图表（柱状图）
        var chart3 = echarts.init(document.getElementById('chart3'));
        var option3 = {
            title: {
                text: '项目评估金额分布'
            },
            tooltip: {},
            legend: {
                data: ['金额']
            },
            xAxis: {
                data: data.map(item => item.projectName)
            },
            yAxis: {},
            series: [{
                name: '金额',
                type: 'bar',
                data: data.map(item => item.estimatedCost)
            }]
        };
        chart3.setOption(option3);

        // 渲染第四个图表（饼图）
        var chart4 = echarts.init(document.getElementById('chart4'));
        var option4 = {
            title: {
                text: '项目状态分布（饼图）'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                data: ["报告待审核", "审核不通过", "审核通过", "已上传"]
            },
            series: [{
                name: '数量',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: data.filter(item => item.status === '报告待审核').length, name: '报告待审核'},
                    {value: data.filter(item => item.status === '审核不通过').length, name: '审核不通过'},
                    {value: data.filter(item => item.status === '审核通过').length, name: '审核通过'},
                    {value: data.filter(item => item.status === '已上传').length, name: '已上传'}
                ]
            }]
        };
        chart4.setOption(option4);
    }

    $(function () {
        // 初始化图表
        initCharts();
    });
</script>
</body>
</html>
